<template>
	<el-container>
		<!-- <el-aside>
			<a-left :data="ldata" @call="onCall"></a-left>
		</el-aside> -->
		<el-main>
			<d-box ref="rePop" :title="wtit">
				<div class="pop_content">
					<div class="odevInfo" v-show="isdev">
						<div class="pop_t">
							<p class="">
								设备编号
								<span class="f2">{{ devInfo.code }}</span>
							</p>
							<p class="">
								设备名称
								<span class="f2">{{ devInfo.name }}</span>
							</p>
							<p class="">
								设备位置
								<span class="f2">{{ devInfo.address }}</span>
							</p>
						</div>
						<div class="br"></div>
						<div class="dinfo">
							<!--<div class="pic">

							</div>-->
							<div class="info">
								<p>氧气用量(m³)
									<span class="f2">{{ devInfo.yongl }}</span>
								</p>
								<p>管道压力(MPa)
									<span class="f2">{{ devInfo.yal }}</span>
								</p>
								<p>气体流速(L/min)
									<span class="f2">{{ devInfo.liul }}</span>
								</p>
								<p>设备状态
									<span class="f2">{{ devInfo.devStatus }}</span>
								</p>
							</div>
						</div>
					</div>
					<div class="buildInfo" v-show="!isdev">
						<div class="iitm">
							氧气用量(m³)
							<span class="f2">{{ dayInfo.oxygenYlDayData }}</span>
						</div>
						<div class="iitm">
							最大小时用量(m³)
							<span class="f2">{{ dayInfo.maxOxygenYlHourData }}</span>
						</div>
						<br />
						<div class="iitm">
							最小压力(MPa)
							<span class="f2">{{ dayInfo.minOxygenPressureDayData }}</span>
						</div>

						<div class="iitm">
							平均压力(MPa)
							<span class="f2">{{ dayInfo.avgOxygenPressureDayData }}</span>
						</div>
						<div class="iitm">
							最大压力(MPa)
							<span class="f2">{{ dayInfo.maxOxygenPressureDayData }}</span>
						</div>
					</div>
				</div>f
			</d-box>
		</el-main>
		<!-- style="width: 480px !important;" -->
		<el-aside>
			<a-rigft :data="rdata" @callOut="onCall"></a-rigft>
		</el-aside>
	</el-container>

</template>

<script setup>
import {
	computed,
	watch,
	ref,
	onUnmounted,
	onMounted,
	nextTick,
	toRefs,
} from "vue";

import {
	useStore
} from "vuex";
import aLeft from "./left.vue"
import aRigft from "./right.vue"
import callApi from "@/api/proj.js";
import dBox from "cmpt/drag-box.vue";
const store = useStore();

const {
	year,
	asideWidth,
	spaceComd
} = toRefs(store.state);

//1.模型models,2.模型类型modelsType
const {
	datMods,
	datModsType
} = toRefs(store.state.s3d);
const cams = ref([]),
	rdata = ref({}),
	ldata = ref({}),
	isdev = ref(false),
	wtit = ref("氧气设备运行详情"),
	rePop = ref(null),
	dayInfo = ref({}) /*氧气日历单日数据 */;

const emits = defineEmits(["call"]);

const hCallOut = (h, d) => {
	emits("call", h, d);
}


watch(rePop, r => {
	r.hid();
})

const devInfo = ref({});;
const onCall = (h, d) => {
	switch (h) {
		case "hShowDayInfo":
			if (!d.data) {
				return;
			}
			isdev.value = false;
			rePop.value.show();
			wtit.value = spaceComd.value.spaceName + " " + d.name;
			break;
		case "hToFlo":
			let flo = d.name?.match(/\d{1,}[\u4e00-\u9fa5]+$/)[0]?.match(/\d{1,}/)[0];
			if (!isNaN(flo)) {
				hCallOut("SetCurrentFloor", [flo * 1]);
			}
			break; //console.log(h, d); 
		case "hDevInfo":
			hCallOut("OnClickDbL", d);
			return;
			isdev.value = true;
			rePop.value.show();
			wtit.value = d.name;
			break;
		default:
			//"hAlrmInfo": //告警信息
			hCallOut(h, d);
			break;
	}
}

//空间,年份 切换
let h = -1;
let ix = 0;
watch([year, spaceComd], o => {
	clearTimeout(h);
	h = setTimeout(() => {
		ix++;
		let d = false;
		refData(o[1], o[0]);
	}, 1000);
});
async function refData(sp, y) {
	let spId = sp.id;
	if (!spId) {
		return;
	}
	//console.log("更新开始",ix);
}


const hRefIndexDat = () => {
	refData(spaceComd.value, year.value);
	// door.getList().then(r => {
	// 	console.log("doors", r);
	// })
};

onMounted(() =>
	nextTick(() => {
		setTimeout(() => {
			hRefIndexDat();
		}, 500);
	})
);
</script>

<style scoped lang="scss">
div[class^="screenNum"] {
	background-size: auto 80%;
	width: 100%;
	height: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

.pop_content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	font-size: 12px;

	.dinfo,
	.pop_t {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;

		>* {
			width: 50%;
		}
	}

	.br {
		height: 2px;
		background: linear-gradient(90deg, transparent, #58b5e3 50%, transparent);
		margin: 14px 0;
	}

	.iitm,
	p {
		margin: 4px 0;
		color: #B6D0F7;
		line-height: 20px;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: baseline;
	}

	.iitm {
		display: inline-block;
		margin-right: 20px;
		line-height: 50px;
	}

	.f2 {
		margin-left: 8px;
		color: #BFCCD9;
		margin-bottom: -3px;
	}
}
</style>